<template>
    <div style="width: 600px;">
        <bk-form :label-width="200" :model="data" :rules="rules" ref="validateForm1">
            <bk-image fit="contain" :src="src" style="width: 50px;"></bk-image>
            <bk-form-item label="衣服类型:" :property="'type'">
                <bk-input v-model="data.type"></bk-input>
            </bk-form-item>
            <bk-form-item label="单价(元/件):" :property="'price'">
                <bk-input v-model="data.price"></bk-input>
            </bk-form-item>
            <bk-form-item label="洗衣模式:" :property="'Washmethod'">
                <bk-radio-group v-model="data.Washmethod">
                    <bk-radio :value="'普通洗'" :disabled="readonly">普通洗</bk-radio>
                    <bk-radio :value="'超强洗'" :disabled="readonly">超强洗</bk-radio>
                </bk-radio-group>
            </bk-form-item>
            <bk-form-item>
                <bk-button style="margin-right: 3px;" theme="primary" @click="checkData">添加</bk-button>
                <bk-button style="margin-right: 3px;" theme="primary" @click="back">返回</bk-button>
            </bk-form-item>
        </bk-form>
    </div>
</template>
<script>

    export default {
        data () {
            const user = sessionStorage.getItem('user')
            if (user) {
                const username = JSON.parse(user)
                this.username = username
            }
            return {
                data: {
                    type: '',
                    Washmethod: '',
                    price: ''
                },
                rules: {
                    type: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        },
                        {
                            max: 10,
                            message: '不能多于10个字符',
                            trigger: 'blur'
                        }
                    ],
                    price: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        }
                    ],
                    Washmethod: [
                        {
                            required: true,
                            message: '必选项',
                            trigger: 'blur'
                        }
                    ]

                }
            }
        },
        methods: {
            checkData () {
                this.$refs.validateForm1.validate().then(validator => {
                    this.saveinfo()
                    this.readonly = true
                    this.editbutton = false
                    this.savebutton = true
                    this.cancelbutton = true
                }, validator => {
                    // 显示第一个出错位置
                    // alert(validator.content)
                })
            },
            saveinfo () {
                const qs = require('qs')
                this.axios({
                    url: '/addprice/',
                    method: 'post',
                    responseType: 'json',
                    data: qs.stringify({
                        type: this.data.type,
                        price: this.data.price,
                        Washmethod: this.data.Washmethod,
                        merchant: JSON.parse(sessionStorage.getItem('user'))
                    })
                }).then(res => {
                    console.log(res.data)
                    if (res.data.message === 'success!') {
                        const h = this.$createElement
                        this.$bkInfo({
                            type: 'success',
                            title: '添加成功',
                            showFooter: false,
                            subHeader: h('a', {
                                style: {
                                    color: '#3a84ff',
                                    textDecoration: 'none',
                                    cursor: 'pointer'
                                }
                            })
                        })
                        this.$router.push({
                            name: 'meprice'
                        })
                    } else {
                        const a = this.$bkInfo({
                            type: 'error',
                            title: '添加失败',
                            subTitle: '此窗口3秒后关闭',
                            showFooter: false
                        })
                        let num = 3
                        const t = setInterval(() => {
                            a.subTitle = `此窗口${--num}秒后关闭`
                            if (num === 0) {
                                clearInterval(t)
                                a.close()
                            }
                        }, 1000)
                    }
                })
            },
            back () {
                this.$router.push({
                    name: 'meprice'
                })
            }
        }
    }
</script>
